<template>
	<view>
		<!-- 日常状态 -->
		<view class="home-status">
			<block v-for="(status,index) in statusLists" :key="index">
				<view class="status-item" :style="{ 'background-color':status.bgColor }">
					<view class="item-left icon iconfont" :class="[status.icon]"></view>
					<view class="item-right">
						<view>{{ status.num }}</view>
						<view>{{ status.title }}</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 导航 -->
		<view class="content-navBar">
			<block v-for="(nav,index) in navLists" :key="index">
				<view class="bar-item" :style="{ 'background-color':nav.bgColor }" hover-class="hoverClass" @click="toNav(nav.router)">
					<view class="icon iconfont" :class="[nav.icon]"></view>
					{{ nav.title }}
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusLists:[
					{
						title:"历史销量",
						num:"1224223",
						icon:"icon-6xiaoliang",
						bgColor:"#4cd964"
					},
					{
						title:"历史销量",
						num:"1224223",
						icon:"icon-6xiaoliang",
						bgColor:"#ffaa7f"
					},
					{
						title:"历史销量",
						num:"1224223",
						icon:"icon-6xiaoliang",
						bgColor:"#ff557f"
					}
				],
				navLists:[
					{
						title:"账户管理",
						icon:"icon-zhanghuguanli",
						router:"../accountAdmin/accountAdmin",
						bgColor:"#5cc6e1"
					},
					{
						title:"商品管理",
						icon:"icon-RectangleCopy",
						router:"../productAdmin/productAdmin",
						bgColor:"#aed1d2"
					},
					{
						title:"订单管理",
						icon:"icon-dingdanguanli",
						router:"../orderAdmin/orderAdmin",
						bgColor:"#7cc2a1"
					},
					{
						title:"其他",
						icon:"icon-dingdanguanli",
						router:"",
						bgColor:"#5dd3e1"
					}
				]
			}
		},
		methods: {
			toNav(url){
				if(url !== ""){
					uni.navigateTo({
						url
					});
				} else {
					uni.showToast({
						icon:"none",
						title: '请输入跳转地址'
					});
				}
				
			}
		}
	}
</script>

<style lang="scss">
	@mixin f-ai($flex,$alignItems) {
		display: $flex;
		align-items: $alignItems;
	}
	
	@mixin f-jc-fw($flex,$justifyContent, $flexWrap) {
		display: $flex;
		justify-content: $justifyContent;
		flex-wrap: $flexWrap;
	}
	
	.home-status{
		padding: 0 20rpx;
		@include f-jc-fw(flex, space-between, wrap);
		.status-item{
			@include f-ai(flex,center);
			width: 49%;
			padding: 20rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			opacity: 0.8;
			.iconfont{
				color: #FFFFFF;
				font-size: 76rpx;
			}
			.item-right{
				flex: 1;
				text-align: center;
				view{
					&:first-child{
						margin-bottom: 10rpx;
						font-size: 36rpx;
					}
					font-size: 28rpx;
				}
			}
		}
	}
	
	
	
	.hoverClass{
		background-color: #f4f4f4 !important;
	}
	.content-navBar {
		padding: 20rpx;
		@include f-jc-fw(flex, space-between, wrap);

		.bar-item {
			width: 32%;
			padding: 10rpx;
			box-sizing: border-box;
			text-align: center;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			border-radius: 10rpx;
			opacity: 0.8;
			.iconfont {
				color: #FFFFFF;
				font-size: 68rpx !important;
			}
		}
	}
</style>
